<template>
  <!-- 新增报价 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      title="新增报价"
      :visible.sync="visible"
      width="850px"
      @closed="reset"
    >
      <el-form ref="dataForm" class="form" :model="query" :rules="rules" label-position="right" label-width="90px">
        <el-form-item label="商品分类:" prop="gtId">
          <el-tree-select
            v-model="query.gtId"
            :clearable="false"
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择',
              loading: $loadingPlugin.getTreeData
            }"
            :tree-params=" {
              'expand-on-click-node': false,
              'highlight-current': true,
              'filterable': true,
              props:{
                value:'gtId',
                label: 'gtName',
                disabled: 'disabled',
              },
              data: goodsTreeData
            }"
            @node-click="selectTreeChange"
          />
        </el-form-item>
        <el-form-item label="商品名称:" prop="goodsId">
          <el-select v-model="query.goodsId" clearable>
            <el-option v-for="(l,i) in goodsTypesDetailList" :key="i" :value="l.goodsId" :label="l.goodsName" />
          </el-select>
        </el-form-item>
        <el-form-item label="报价类型:" prop="priceType">
          <el-select v-model="query.priceType" placeholder="请选择">
            <el-option :value="1" label="下浮" />
            <el-option :value="2" label="固定" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格(元):" prop="price">
          <el-input-number v-model="query.price" :controls="false" :precision="2" :max="9999999" placeholder="请输入" style="width: 100%;" />
        </el-form-item>
        <div class="prompt">特别提示：若报价类型选择下浮时下浮的基准值为总公司报价(非区域报价)</div>
        <div v-if="corpSettingData.sp2 >> 24 & 0x01" style="width: 100%;">
          <el-divider />
          <div style=" margin-bottom: 30px; color: #333;">相关服务费用设置</div>
          <el-form-item label="远距配送费:" class="block" label-width="100px">
            <el-radio-group v-model="query.radio1">
              <el-radio :label="1">市场价</el-radio>
              <el-radio :label="2">自定义</el-radio>
              <el-input-number v-show="query.radio1 === 2" v-model="query.spFee" :controls="false" :max="10000" :precision="2" placeholder="请输入远距配送费" style="width: 150px;" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上楼费:" class="block">
            <el-radio-group v-model="query.radio2">
              <el-radio :label="1">市场价</el-radio>
              <el-radio :label="2" style="margin-right: 30px;">自定义</el-radio>
            </el-radio-group>
            <span v-show="query.radio2 === 2">上楼费基数(起步价): </span><el-input-number v-show="query.radio2 === 2" v-model="query.baseFloorFee" :controls="false" :max="10000" :precision="2" placeholder="请输入上楼费基数" />
            <span v-show="query.radio2 === 2">楼层费: </span><el-input-number v-show="query.radio2 === 2" v-model="query.lpFee" :controls="false" :max="10000" :precision="2" placeholder="请输入上楼费" />
          </el-form-item>
          <el-form-item label="服务费:" class="block">
            <el-radio-group v-model="query.radio3">
              <el-radio :label="1">市场价</el-radio>
              <el-radio :label="2">自定义</el-radio>
              <el-input-number v-show="query.radio3 === 2" v-model="query.tpFee" :controls="false" :max="10000" :precision="2" placeholder="请输入服务费" />
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">
          关闭
        </el-button>
        <el-button :loading="$loadingPlugin.submit" type="primary" @click="success">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { goodsTypeDetail, queryPriceTypeAddPrice } from '@/api'
  import { mapGetters } from 'vuex'
  export default {
    name: 'addQuotation',
    props: {
      goodsTreeData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        visible: false,
        treeData: [],
        goodsTypesDetailList: [],
        gtInfo: {},
        temp: {},
        priceTypeDetail: {},
        query: {
          gtId: '',
          goodsId: '',
          priceType: '',
          price: undefined,
          spFee: undefined,
          lpFee: undefined,
          baseFloorFee: undefined,
          tpFee: undefined,
          gtTree: 0,
          goods: 0,
          radio1: 1,
          radio2: 1,
          radio3: 1
        },
        rules: {
          gtId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
          goodsId: [{ required: true, message: '请选择商品', trigger: 'change' }],
          priceType: [{ required: true, message: '请选择报价类型', trigger: 'change' }],
          price: [{ required: true, message: '请输入报价', trigger: 'change' }]
        }
      }
    },
    computed: {
      ...mapGetters([
        'corpSettingData'
      ])
    },
    methods: {
      // 选择商品分类
      selectTreeChange(value) {
        this.query.goodsId = ''
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate('goodsId')
        })
        if (value) {
          this.gtInfo = value
          this.getGoodsTypeDetails(value.gtId)
        }
      },
      // 获取商品分类详情
      async getGoodsTypeDetails(val) {
        try {
          const res = await goodsTypeDetail({ gtId: val })
          this.goodsTypesDetailList = res.data.rows
          if (res.data.rows.length > 0) this.query.goodsId = res.data.rows[0].goodsId
        } catch (error) {
          console.log(error)
        }
      },
      // 打开
      open(query) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          console.log(this.corpSettingData.sp2 >> 24 & 0x01)
          if (this.goodsTreeData.length > 0) {
            this.query.gtId = this.goodsTreeData[0].gtId
            this.selectTreeChange(this.goodsTreeData[0])
          }
          if (query) {
            this.priceTypeDetail = { ...query }
          }
        })
      },
      success() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          const gtInfo = this.gtInfo
          const goodsId = this.query.goodsId
          if (goodsId) {
            var goodsObj = this.goodsTypesDetailList.find(l => l.goodsId === this.query.goodsId)
            var goodsName = goodsObj.goodsName
          }
          const priceType = this.query.priceType
          const price = this.query.price
          const priceCg = this.priceTypeDetail
          if (price) {
            var reg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/
            if (!reg.test(price)) {
              this.$message.error('价格输入有误，请重新输入')
              return
            }
            if (price < 0) {
              this.$message.error('价格不能小于0')
              return
            }
          }
          var spFee = 0; var lpFee = 0; var tpFee = 0; var baseFloorFee = 0
          var b_sp = this.query.radio1
          if (b_sp === 2) {
            spFee = this.query.spFee
            if (!spFee) {
              this.$message.error('您选择自定义远距配送费却没有输入具体的值,请输入')
              return
            }
            spFee *= 100
            spFee = Number(spFee.toFixed(0))
            spFee = (spFee << 1) | 1
          } else {
            spFee = 0
          }
          var b_lp = this.query.radio2
          if (b_lp === 2) {
            baseFloorFee = this.query.baseFloorFee
            lpFee = this.query.lpFee
            if (!lpFee) {
              this.$message.error('您选择自定义上楼费却没有输入具体的值,请输入')
              // $('#txt_price_define_lpfee').textbox('textbox').focus()
              return
            }
            lpFee *= 100
            lpFee = Number(lpFee.toFixed(0))
            lpFee = (lpFee << 1) | 1
            baseFloorFee = baseFloorFee * 1
          } else {
            lpFee = 0
          }

          var b_tp = this.query.radio3
          if (b_tp === 2) {
            tpFee = this.query.tpFee
            if (!tpFee) {
              this.$message.error('您已选择自定义服务费却没有输入具体的值,请输入')
              // $('#txt_price_define_tpfee').textbox('textbox').focus()
              return
            }
            tpFee *= 100
            tpFee = Number(tpFee.toFixed(0))
            tpFee = (tpFee << 1) | 1
          } else {
            tpFee = 0
          }
          const params = {
            gtId: gtInfo.gtId,
            gtName: gtInfo.gtName,
            goodsId: goodsId,
            goodsName,
            priceType: priceType,
            price: price,
            priceCgId: priceCg.priceCgId,
            orgId: priceCg.orgId,
            orgName: priceCg.orgName,
            orgSNNo: priceCg.orgSNNo,
            spFee: spFee,
            lpFee: lpFee,
            baseFloorFee: baseFloorFee,
            tpFee: tpFee
          }
          this.submit(params)
        })
      },
      async submit(params) {
        await queryPriceTypeAddPrice(params)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.$nextTick(() => {
          this.visible = false
          this.gtInfo = {}
          this.temp = {}
          this.priceTypeDetail = {}
          this.query = {
            gtId: '',
            goodsId: '',
            price: undefined,
            priceType: '',
            spFee: undefined,
            lpFee: undefined,
            baseFloorFee: undefined,
            tpFee: undefined,
            gtTree: 0,
            goods: 0,
            radio1: 1,
            radio2: 1,
            radio3: 1
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 50%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}

.prompt {
  color: red;

  span {
    color: blue;
  }
}
</style>
